<template>
  <div class="email">
    <div class="email-wrapper" v-loading="loading">
      <transition name="emailsbox">
        <ul class="email-box" v-show="!emailContentOpened">
          <li v-for="email in emails" :key="email.emailId" class="email-box-item" @click="openEmailContent(email)">
            <van-badge :dot="!email.readStatus">
              <img :src="images.maillogo" alt="">
            </van-badge>
            <div class="email-info">
              <div class="email-info__title">{{ email.content }}</div>
              <div class="email-info__time">{{ parseTime(email.createTime)}}</div>
            </div>
            <div class="email-linker" v-if="email.reward">
              <i-uiw-paper-clip /><span>{{t('mail.text003')}}</span><i-ep-arrow-right-bold />
            </div>
          </li>
        </ul>
      </transition>
      <transition name="emailscontent">
        <div class="email-box" v-show="emailContentOpened">
          <div class="email-box__header email-box-item">
            <img :src="images.maillogo" alt="">
            <div class="email-info">
              <div class="email-info__title">{{ emailContent.name }}</div>
              <div class="email-info__time">{{ parseTime(emailContent.createTime) }}</div>
            </div>
          </div>
          <div class="email-box__content">
            <p>{{ emailContent.content }}</p>
            <div class="email-box__content-footer" v-if="emailContent.reward">
              <i-uiw-paper-clip /><span>{{t('mail.text003')}}</span>：
              <img :src="splitForReward(emailContent.reward, 'pic')" alt=""> +{{ splitForReward(emailContent.reward, 'money') }}
            </div>
          </div>
          <div class="email-box__tips"> If you have any questions kindly get in touch with our 24x7 customer service </div>
        </div>
      </transition>
      <div class="no-content-yet" v-if="emails.length === 0">{{t('BetRecord.Nocontent')}}</div>
    </div>
    <div class="email-buttons" :class="{'email-opened': emailContentOpened}">
      <div class="email-buttons-item email-buttons__delete" v-if="!emailContentOpened" @click="deleMail">{{t("notice.Deletes")}}</div>
      <div class="email-buttons-item email-buttons__onebyone" v-if="!emailContentOpened" @click="onebyone">{{t('notice.text14')}}</div>
      <div class="email-buttons-item email-buttons__receive" v-if="emailContentOpened && !emailContent.rewardStatus" @click="updateRewardStatus(emailContent.emailId)">{{t('mail.text004')}}</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Email">
import userinfoApi from '@/api/modules/userinfo';
import userinfo from '@/store/userinfo';
import system from '@/store/system';
import { parseTime } from '@/utils/format';

const piniaUserinfo:any = userinfo();
const piniaSystem:any = system();
const emits = defineEmits(['openEmailContent']);
const { t } = useI18n();


const images: any = reactive({
  maillogo: new URL(`../../assets/images/header/maillogo.svg`, import.meta.url).href,
});

const global:any = getCurrentInstance()?.appContext.config.globalProperties;

const data:any = reactive({
  emails: computed(()=>{
    let emailsList = piniaUserinfo.getEmail || [];
    emailsList.forEach((element: any) => {
      const currentLanContent = (element.lanContent || []).find((im:any)=> im.languageCode == piniaSystem.getLang.code) || {};
      const currentLanName = (element.lanName || []).find((im:any)=> im.languageCode == piniaSystem.getLang.code) || {};
      if(currentLanContent.content){
        element.content = currentLanContent.content;
      }
      if(currentLanName.content){
        element.name = currentLanName.content;
      }
    });
    return emailsList;
  }),
  loading: false,
  emailContent: {
  },
  emailContentOpened: false
});

const {
  emails,
  loading,
  emailContent,
  emailContentOpened
} = toRefs(data);


// 打开邮件
const openEmailContent = (email: any) => {
  emailContent.value = email;
  emailContentOpened.value = true;
  emits('openEmailContent', true);
  updateReadStatus(email.emailId);
}

// 更新已读状态
const updateReadStatus = (id?: string) => {
  let queryData = id ? {id: id} : {};
  userinfoApi.updateReadEmailStatus(queryData).then((response:any)=>{
    if(response.code === 200){
      piniaUserinfo.queryNoticeAndEmail();
    }
  });
}

// 附件领取状态
const updateRewardStatus = (id?: string) => {
  let queryData = id ? {id: id} : {};
  userinfoApi.updateRewardEmailStatus(queryData).then((response:any)=>{
    if(response.code === 200){
      global.message(response.msg);
      emailContentOpened.value = false;
      piniaUserinfo.queryNoticeAndEmail();
    }
  });
}

// 依次领取
const onebyone = () => {
  updateRewardStatus();
  updateReadStatus();
}


// 删除所有邮件
const deleMail = () => {
  userinfoApi.deleMail({}).then((response: any)=>{
    if(response.code === 200){
      global.message(response.msg);
      piniaUserinfo.queryNoticeAndEmail();
    }
  });
}

// 切割
const splitForReward = (reward: any, type: string) => {
  if(!reward){
    return 0;
  }else{
    const arr = reward.split(',');
    if(type === 'money'){
      return arr[1];
    }else if(type === 'pic'){
      const walletMoney = piniaUserinfo.getWallet.find((im:any)=> im.currencyId == arr[0]);
      return walletMoney.currencyIcon;
    }
  }
}

// 关闭内容
const closeContent = () => {
  emailContentOpened.value = false;
}

defineExpose({
  closeContent
});
</script>

<style lang="scss" scoped>
@import url('./index.scss');
$timer: 0.7s;
.emailsbox-enter-active {
  animation: bounceInLeft $timer;
}
.emailsbox-leave-active {
  animation: bounceOutLeft $timer;
}
.emailscontent-enter-active {
  animation: bounceInRight $timer;
}
.emailscontent-leave-active {
  animation: bounceOutRight $timer;
}
</style>
